<template>
  <div>
    <el-dialog
      :visible="visible"
      title="选择地址"
      @close="visible = false"
    >
      <div class="operations">
        <el-button
          type="primary"
          @click="openForm()"
        >新增</el-button>
      </div>
      <el-table
        :data="dataList"
        stripe
        style="width: 100%;margin-bottom:10px"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="postalCode"
          label="邮政编码"
        />
        <el-table-column
          prop="receiveName"
          label="收货人"
        />
        <el-table-column
          prop="phone"
          label="手机号"
        />
        <el-table-column
          prop="isDefaultAddress"
          label="是否默认"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.isDefaultAddress"
              type="success"
            >默认</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              @click="openForm(scope.row.addressId)"
            >编辑</el-button>
            <el-button
              type="danger"
              @click="deleteHandle(scope.row.addressId)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="confirm"
      >确 定</el-button>
    </el-dialog>
    <Form
      ref="form"
      @refresh="load"
    />
  </div>
</template>

<script>
import { getUserAddressList, deleteAddress } from '@/api/mall/address'
import Form from '@/views/reception/manager/address/components/form.vue'
export default {
  components: { Form },
  data() {
    return {
      visible: false,
      dataList: [],
      seleteList: [],
      currentRow: null
    }
  },
  methods: {
    async init() {
      this.visible = true
      this.load()
    },
    load() {
      this.$getUserId().then(async(userId) => {
        const res = await getUserAddressList(userId)
        this.dataList = res.data
      })
    },
    confirm() {
      this.visible = false
      this.$emit('setAddress', this.currentRow)
    },
    openForm(id) {
      this.$refs.form.init(id)
    },
    deleteHandle(id) {
      this.$confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (id) {
          console.log(id)
          this.delete(deleteAddress, id)
        } else {
          let ids = ''
          this.seleteList.forEach(item => {
            ids += item.id + ','
          })
          this.delete(deleteAddress, ids)
        }
      })
        .catch(() => { })
    },
    delete(operation, param) {
      operation(param).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(() => {
        this.$message({
          type: 'danger',
          message: '操作失败'
        })
      })
    },
    handleCurrentChange(val) {
      this.currentRow = val
    }
  }
}
</script>

<style>
.form {
  margin-bottom: 20px;
}
</style>
